<template>
  <div>
    <el-table
      :data="tableData"
      :max-height="height">
      <el-table-column
        v-for="(title,index) in tableTitle"
        :key="index"
        :fixed="title.fixed"
        :prop="title.prop"
        :label="title.label"
        :width="title.width">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
            {{buttonName}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'cement-table-card',
  props: {
    buttonName: {
      type: String,
      default: '查看'
    },
    height: {
      type: Number,
      default: 400
    },
    tableTitle: {
      type: Array,
      default: function () {
        return [
          {
            prop: 'test1',
            label: '测试1',
            width: 200,
            fixed: true
          },
          {
            prop: 'test2',
            label: '测试2',
            width: 200
          }
        ]
      }
    },
    tableData: {
      type: Array,
      default: function () {
        return [{
          test1: '测试',
          test2: '测试'
        }, {
          test1: '测试',
          test2: '测试'
        }, {
          test1: '测试',
          test2: '测试'
        }]
      }
    }
  },
  methods: {
    deleteRow (index, data) {
      this.$emit('cementClick', data[index])
    }
  }
}
</script>

<style scoped>

</style>
